<template>
  <div>
    <box title="告警事件">
      <div class="h-full flex flex-col px-[16px] pt-[10px]">
        <!-- 切换tab -->
        <div class="flex">
          <div class="flex-1 flex justify-center text-[16px] cursor-pointer transition-all duration-300 items-center"
            v-for="(item, index) in tablist">
            <div class="w-[100%] h-[32px]  flex justify-center text-[16px] items-center transition-all duration-300"
              :class="isactive == item.id ? 'bgactive' : 'nobgactive'" @click="change(item.id)">{{ isNullOrEmpty(
                item.name) }}
            </div>
          </div>
        </div>
        <!-- list -->
        <div class="flex-1">
          <div v-if="tableData.data.length != 0"
            class="w-[100%] mt-[16px] py-[16px]  pl-[16px] h-[142px] mb-[16px] cursor-pointer listbgc"
            v-for="(item, index) in tableData.data" @click="showAlarmInfo(item)">
            <div class="flex justify-between">
              <!-- text-ellipsis line-clamp-1 break-all -->
              <div class="max-w-[200px]">
                <div class="text-[16px]  leading-[16px] h-[16px] relative text-ellipsis line-clamp-1 break-all "
                  style="border-bottom: 3px solid rgba(69,131,255,0.5) ; ">
                  {{ isNullOrEmpty(item.deviceName) }}
                </div>

                <!-- <div class="absolute bottom-[-3px]  h-[5px] left-0 opacity-[0.5] bg-[#4583FF]"></div> -->
              </div>
              <div class="w-[70px] h-[32px] flex justify-center text-[16px] items-center "
                :class="item.alarmType == 1 ? 'listbg1' : item.alarmType == 2 ? 'listbg2' : item.alarmType == 3 ? 'listbg3' : 'listbg'">

                {{ isNullOrEmpty(ALARMTYPES[item.alarmType]?.label ? ALARMTYPES[item.alarmType]?.label : '正常') }}
              </div>
            </div>
            <div class="flex mt-[5px] gap-[22px]">
              <div class="text-[14px] text-[#D6D6D6]">设备编号</div>
              <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.deviceSN) }}</div>
            </div>
            <div class="flex mt-[16px] gap-[22px]">
              <div class="text-[14px] text-[#D6D6D6]">告警信息</div>
              <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.alarmTitle) }}</div>
            </div>
            <div class="flex mt-[16px] gap-[22px]">
              <div class="text-[14px] text-[#D6D6D6]">告警时间</div>
              <div class="text-[14px] flex-1 text-[#ffffff] ml-[20px]">{{ isNullOrEmpty(item.createdAt) }}</div>
            </div>
          </div>
          <nullpng v-else />
        </div>
        <!-- 分页 -->
        <div class=" pr-[50px] h-[59px] w-[100%]  px-[16px] flex justify-center items-center">
          <el-pagination v-model:current-page="searchFrom.page" v-model:page-size="searchFrom.limit" background
            :layout="PAGE_LAYOUTLEFTS" :total="tableData.total" @size-change="getTableList" size="small"
            style="color: #fff;" @current-change="getTableList" :pager-count="3" />
        </div>
      </div>
    </box>
  </div>
</template>
<script lang="ts" setup>
import { isNullOrEmpty } from '@/utils/functions'
import nullpng from '@/views/large-data-screen/menu-content/null-png.vue'
import { screenprejectalarms } from "@/api/screen/largeData";
import { PAGE_LAYOUTLEFTS } from "@/constant";
import { ALARMTYPES } from "@/constant/alarm-mangenment";
import box from '@/views/large-data-screen/component/box.vue'
import { showAlarmInfo } from '../../../../utils/index'

const tablist =
  [
    { name: '待确认', id: 1 },
    { name: '处理中', id: 2 },

  ]
const isactive = ref(1)
const active = ref(1)
const list = ref([
  {
    name: '水泵',
    id: 1,
    status: 1,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },
  {
    name: '水泵',
    id: 2,
    status: 2,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },
  {
    name: '水泵',
    id: 3,
    status: 3,
    num: 'NO54125',
    info: '电压过高（UA-123）',
    location: '教学楼2栋3单元'
  },

])
const tableData = reactive({
  data: [],
  total: 0
});
const searchFrom = ref({
  status: 1, //处理结果 1.待确认 2待处理
  page: 1,
  limit: 3
});
onMounted(() => {
  getTableList()// 获取表格数据
})
const change = (id: number) => {
  isactive.value = id
  searchFrom.value.status = id
  getTableList()

}
const getTableList = () => {
  // 获取表格数据
  screenprejectalarms(searchFrom.value).then(res => {
    tableData.data = res.result.data
    tableData.total = res.result.total

  })
}
</script>
<style lang="scss" scoped>
.bgactive {
  background: linear-gradient(0deg, #24293F, #1C4597);
  border-radius: 5px;
}

.listbg {
  background: linear-gradient(90deg, rgba($color: #3a7e32, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(37, 176, 19, 1);
  border-left: 2px solid rgba(37, 176, 19, 1);
}

.listbg1 {
  background: linear-gradient(90deg, rgba($color: #F03232, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(240, 50, 50, 1);
  border-left: 2px solid rgba(240, 50, 50, 1);
}

.listbg2 {
  background: linear-gradient(90deg, rgba($color: #D8722F, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  color: rgba(224, 117, 46, 1);
  border-left: 2px solid rgba(224, 117, 46, 1);
}

.listbg3 {
  color: rgba(173, 173, 173, 1);
  background: linear-gradient(90deg, rgba($color: #ADADAD, $alpha: 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  border-left: 2px solid rgba(173, 173, 173, 1);
}

.listbgc {
  background: rgba($color: #25293B, $alpha: 0.6);
  // opacity: 0.6;
  border-image: linear-gradient(0deg, #4583FF, #0B3556) 10 10;
}
</style>
